<template>
  <div class="scrollTable">
    <div class="table_header"
    >
      <div class="table_header_item" :key="index" v-for="(item,index) in config.header"
           :style="{width:config.columnWidth[index] + 'px'}">
        {{ item }}
      </div>
    </div>
    <div class="carousel-container" ref="carouselContainer" @mouseenter="stopScroll" @mouseleave="startScroll">
      <div class="row" v-for="(item2,index2) in config.data" :key="index2 + '0'">
        <div class="row-item" :key="index3 + '1'" v-for="(item3,index3) in item2" v-html="item3"
             :style="{width:config.columnWidth[index3] + 'px'}"></div>
      </div>
      <template v-if="isScroll">
        <div class="row" v-for="(item2,index2) in config.data" :key="index2 + '2'">
          <div class="row-item" :key="index3 + '3'" v-for="(item3,index3) in item2" v-html="item3"
               :style="{width:config.columnWidth[index3] + 'px'}"></div>
        </div>
      </template>
    </div>
    <!--<dv-scroll-board class="dv-scr-board" :config="config"/>-->
  </div>
</template>

<script>

export default {
  name: '',
  props: {
    config: {},
    isScroll: {
      default: false
    },
    // 每次滚动的间隔时间（毫秒）
    scrollSpeed: {
      type: Number,
      default: 100
    },
    // 每次滚动的步长（像素）
    scrollStep: {
      type: Number,
      default: 1
    }
  },
  components: {},
  created() {
  },
  mounted() {
    console.log(this.config, 'this.config')
    // 启动无限滚动
    if (this.isScroll) {
      this.startScroll()
    }
  },
  beforeDestroy() {
    if (this.isScroll) {
      // 组件销毁前清除定时器
      this.stopScroll()
    }
  },
  data() {
    return {
      scrollInterval: null
    }
  },
  methods: {
    // 启动滚动逻辑
    startScroll() {
      const container = this.$refs.carouselContainer
      this.scrollInterval = setInterval(() => {
        // 当滚动高度超过内容高度的一半时，重置滚动位置，实现无限滚动
        if (container.scrollTop >= container.scrollHeight / 2) {
          container.scrollTop = 0
        } else {
          container.scrollTop += this.scrollStep
        }
      }, this.scrollSpeed)
    },
    // 停止滚动定时器
    stopScroll() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval)
        this.scrollInterval = null
      }
    }
  }
}
</script>
<style scoped lang="scss">
.carousel-container {
  /* 固定高度，超出部分隐藏，实现轮播效果 */
  //height: 200px; /* 可根据实际需求调整 */
  overflow: hidden;
  position: relative;
  height: 100%;
  transition: all 1s ease;

}

.scrollTable {
  width: 100%;
  height: 100%;

  .table_header {
    display: flex;

    .table_header_item {
      padding: 12px 0;
      font-weight: 400;
      font-size: 14px;
      color: #A2BED0;
      line-height: 14px;
      text-align: center;
    }
  }

  .row {
    display: flex;
    align-items: center;
    background-image: url("@/assets/img/Rectangle36@2x.png");
    margin-bottom: 8px;

    &:nth-child(odd) {
      background-image: url("@/assets/img/Rectangle36@2x(1).png");
    }
  }

  ::v-deep .table_header {
    font-weight: 400;
    font-size: 14px;
    color: #A2BED0;
    line-height: 14px;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    //padding: 0 20px;
  }

  ::v-deep .table_data {
    font-weight: 500;
    font-size: 14px;
    color: #A7C5D9;
    line-height: 14px;
    padding: 12px 0;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    justify-content: center;

    &.blue {
      color: #16B3E0;
    }


    img {
      width: 9px;
      height: 11px;
      margin-right: 8px;
      vertical-align: middle;
    }
  }
}
</style>
